<template>
  <div id="detail">
    <div class="detail-container">
      <div class="detail-bar">
        <div class="detail-title">明细数据</div>
        <el-button type="primary" class="btn-export" @click="outExport">导出</el-button>
      </div>
      <div class="sort">
        <div class="dishes">
          <div class="text">销售类别</div>
          <div class="num">{{ saletype }} 种</div>
        </div>

        <div class="dishes">
          <div class="text">菜品销量</div>
          <div class="num">{{ dish_sales }}</div>
        </div>

        <div class="dishes">
          <div class="text">菜品退量</div>
          <div class="num">{{ refund_mount }}</div>
        </div>

        <div class="dishes">
          <div class="text">菜品均价</div>
          <div class="num">{{ average_price }}</div>
        </div>
      </div>

      <div class="table">
        <el-table :data="list" border style="width: 100%" class="table-bgc" stripe>
          <el-table-column type="index" label="序号" width="90">
          </el-table-column>
          <el-table-column prop="name" label="菜品名称"> </el-table-column>
          <el-table-column prop="dishNo" label="菜品编码"> </el-table-column>
          <el-table-column prop="dishType" label="菜品类别"> </el-table-column>
          <el-table-column prop="dishUnit" label="菜品单位"> </el-table-column>
          <el-table-column prop="price" label="单价"> </el-table-column>
          <el-table-column prop="sales" label="销售量"> </el-table-column>
          <el-table-column prop="refund" label="退货量"> </el-table-column>
          <el-table-column prop="amount" label="金额"> </el-table-column>
        </el-table>
      </div>
      <Pagination @shareData="getInfo" :totalCount="totCount"></Pagination>
    </div>
  </div>
</template>

<script>
//导入全局导出文件
import exportUtils from '../exportUtils'

import bus from '../EventBus'
import Pagination from '../../common/Pagination.vue'

export default {
  data() {
    return {
      formInline: {
        dishName: '', //菜品名称
        category: '' //菜品类别
      },

      //当前页数
      page: 1,
      //当前页数显示的条数
      pageSize: 5,
      //数据总条数
      totCount: 0,
      //菜品列表渲染
      list: [],
      //销售类别
      saletype: 0,
      //菜品销量
      dish_sales: 0,
      //菜品退量
      refund_mount: 0,
      //菜品均价
      average_price: 0,
      //菜品类型
      dishType: {
        id: '',
        sort: ''
      },

      //导出接口状态响应码
      code: 20000
    }
  },
  methods: {
    //获取菜品列表接口
    async getDishList() {
      const { data: res } = await this.axios.post('/dishSales/list', {
        category: this.formInline.category,
        dishName: this.formInline.dishName,
        page: this.page,
        pageSize: this.pageSize
      })
      // console.log(res)
      if (res.code !== 200) return console.log('调用接口失败')

      this.list = res.data.data

      //销售类别
      this.saletype = res.data.type
      //菜品销量
      this.dish_sales = res.data.dishSales
      //菜品退量
      this.refund_mount = res.data.refundAmount
      //菜品均价
      this.average_price = res.data.averagePrice

      //数据总条数
      this.totCount = res.count

      //将当前组件的数据传递给父组件
      this.$emit('getDishList', this.list, this.totCount)
    },

    //分页子组件向当前父组件传值
    getInfo(val) {
      // console.log(val)
      this.page = val.nowPage
      this.pageSize = val.pageCount

      this.getDishList()
    },

    //点击导出 调用导出接口
    outExport() {
      let params = { code: this.code }
      let myObj = {
        method: 'get',
        url: 'http://49.235.240.193:8080/admin/dishSales/export', //接口地址
        fileName: '菜品销售',
        data: params
      }
      //调用封装方法
      exportUtils.exportMethod(myObj)
    }
  },

  created() {
    this.getDishList()

    //兄弟组件传值(接收来自 DishSales的值)
    bus.$on('getList', (val1, val2) => {
      // console.log(val1, val2)
      // this.dishFlowList = val1
      // this.totCount = val2
      // this.formInline.dishName = val3
      // this.formInline.category = val4

      this.formInline.dishName = val1
      this.formInline.category = val2

      this.getDishList()
    })
  },
  components: {
    Pagination
  }
}
</script>

<style lang="less" scoped>
.detail-container {
  background-color: #fff;
  border: 0.1rem solid #dbe0e9;
  margin-top: 2rem;
  .detail-bar {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.1rem solid #dbe0e9;
    background-color: #f2f2f2;
    .detail-title {
      height: 4rem;
      background-color: #f2f2f2;
      box-sizing: border-box;
      line-height: 4rem;
      font-size: 1.4rem;
      padding-left: 3rem;
      font-weight: 500;
      color: #666666;
    }
    .btn-export {
      margin-right: 3rem;
      font-size: 1.4rem;
      line-height: 1rem;
      padding: 8px 20px;
    }
  }
}
.sort {
  background-color: #f5f6fc;
  line-height: 2rem;
  margin: 1.5rem;
  display: flex;
  justify-content: space-around;
  .dishes {
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text {
      font-size: 1.5rem;
      color: #606266;
    }
    .num {
      margin-top: 0.5rem;
      padding: 0.2rem 3rem;
      border: 0.1rem solid #dcdfe6;
    }
  }
}
.table {
  background-color: #fff;
  padding: 1.5rem;
  .el-table--border {
    background-color: #f5f6fc;
    padding: 0.5rem;
    box-sizing: border-box;
  }
}

.detail-bar {
  align-items: center;
}

.el-select-dropdown__item.selected {
  color: #606266;
  font-weight: normal;
}

/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
}
</style>
